<!-- 雷达图 https://echarts.apache.org/examples/zh/editor.html?c=radar -->
<template>
  <div class="chart-container">
    <div ref="chart" class="chart"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  props: {
    list: {
      type: Array,
      required: true,
    },
  },
  mounted() {
    this.renderChart();
  },
  watch: {
    list: {
      handler() {
        this.renderChart();
      },
      deep: true,
    },
  },
  methods: {
    renderChart() {
      const chartDom = this.$refs.chart;
      const myChart = echarts.init(chartDom, "");
      const option = this.generateOption();
      myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    generateOption() {
      const indicator = [
        { name: "平均叫车里程", name2: "averageTripDistance", max: 10 },
        { name: "乘客评价", name2: "passengerRating", max: 5 },
        { name: "平均乘车费用", name2: "averageFare", max: 50 },
        { name: "司机评分", name2: "driverRating", max: 5 },
        { name: "高峰时段叫车数量", name2: "peakHourOrderCount", max: 300 },
        { name: "夜间叫车数量", name2: "nighttimeOrderCount", max: 200 },
      ];

      const data = this.list.map((item) => {
        return {
          value: [
            item.averageTripDistance,
            item.passengerRating,
            item.averageFare,
            item.driverRating,
            item.peakHourOrderCount,
            item.nighttimeOrderCount,
          ],
          name: item.name,
        };
      });

      const option = {
        title: {
          text: "",
        },
        legend: {
          data: this.list.map((item) => item.name),
        },
        radar: {
          indicator: indicator,
        },
        series: [
          {
            type: "radar",
            data: data,
          },
        ],
      };

      return option;
    },
  },
};
</script>
<style lang="scss" scoped>
</style>
